<template>
    <div class="home">
        <div id="box" ref="box"></div>
    </div>
</template>
  
<script>
// @ is an alias to /src
//引入echarts
import * as echarts from "echarts"
export default {
    name: 'HomeView',
    mounted() {
        // 获取绘制容器
        let box = this.$refs.box
        // 初始化echarts
        let main = echarts.init(box)
        let xAxisData = [];
        let data1 = [];
        let data2 = [];
        let data3 = [];
        let data4 = [];
        for (let i = 0; i < 10; i++) {
            xAxisData.push('Class' + i);
            data1.push(+(Math.random() * 2).toFixed(2));
            data2.push(+(Math.random() * 5).toFixed(2));
            data3.push(+(Math.random() + 0.3).toFixed(2));
            data4.push(+Math.random().toFixed(2));
        }
        var emphasisStyle = {
            itemStyle: {
                shadowBlur: 10,
                shadowColor: 'rgba(0,0,0,0.3)'
            }
        };
        let option = {
            legend: {
                data: ['bar', 'bar2', 'bar3', 'bar4'],
                left: '10%'
            },
            brush: {
                toolbox: ['rect', 'polygon', 'lineX', 'lineY', 'keep', 'clear'],
                xAxisIndex: 0
            },
            toolbox: {
                feature: {
                    magicType: {
                        type: ['stack']
                    },
                    dataView: {}
                }
            },
            tooltip: {},
            xAxis: {
                data: xAxisData,
                name: 'X Axis',
                axisLine: { onZero: true },
                splitLine: { show: false },
                splitArea: { show: false }
            },
            yAxis: {},
            grid: {
                bottom: 100
            },
            series: [
                {
                    name: 'bar',
                    type: 'bar',
                    stack: 'one',
                    emphasis: emphasisStyle,
                    data: data1
                },
                {
                    name: 'bar2',
                    type: 'bar',
                    stack: 'one',
                    emphasis: emphasisStyle,
                    data: data2
                },
                {
                    name: 'bar3',
                    type: 'bar',
                    stack: 'two',
                    emphasis: emphasisStyle,
                    data: data3
                },
                {
                    name: 'bar4',
                    type: 'bar',
                    stack: 'two',
                    emphasis: emphasisStyle,
                    data: data4
                }
            ]
        };
        main.on('brushSelected', function (params) {
            var brushed = [];
            var brushComponent = params.batch[0];
            for (var sIdx = 0; sIdx < brushComponent.selected.length; sIdx++) {
                var rawIndices = brushComponent.selected[sIdx].dataIndex;
                brushed.push('[Series ' + sIdx + '] ' + rawIndices.join(', '));
            }
            main.setOption({
                title: {
                    backgroundColor: '#333',
                    text: 'SELECTED DATA INDICES: \n' + brushed.join('\n'),
                    bottom: 0,
                    right: '10%',
                    width: 100,
                    textStyle: {
                        fontSize: 12,
                        color: '#fff'
                    }
                }
            });
        });
        // 生成图标
        main.setOption(option)

    }
}
</script>
  
<style>
#box {
    margin-top: 20px;
    width: 1200px;
    height: 680px;
    /* background-color: #eaeaea; */
}
</style>
  